<!--
 * @Author: your name
 * @Date: 2021-04-26 15:14:15
 * @LastEditTime: 2021-05-18 17:23:41
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vpvmf-web-vue\src\views\ftpManage\positionManage\table.vue
-->
<template>
  <div>
    <el-row class="table container">
      <el-col style="margin-right: 10px" class="content-left"></el-col>
      <!-- 按钮与搜索 -->
      <el-row class="handleBox">
        <!-- 左侧按钮 -->
        <el-col :span="2">
          <el-button @click="exportParam()">导出数据SQL</el-button>
       </el-col>
        <el-col :span="16">

        <!-- <el-form-item 
                          label="导入内容："> -->
        <!-- <div class="channelBox">
                    <el-upload ref="upload"
                               :multiple="false"
                               action
                               :limit="1"
                               :file-list="fileList"
                               :on-exceed="handleExceed"
                               :before-upload="beforeAvatarUpload"
                               :before-remove="beforeRemove"
                               :http-request="httpRequest">
                               
                        <div class="channelI"><i class="el-icon-upload" /></div>
                        <div slot="tip">只能上传sql文件</div>
                        <el-button>导入</el-button>
                    </el-upload> -->
        <!-- <div slot="importArea"> -->
          <!-- 导入操作区域 -->
          <el-upload
            accept=".sql"
            ref="fileData"
            :multiple="false"
            :before-upload="beforeAvatarUpload"
            :show-file-list="false"
            action
            :limit="1"
            :http-request="uploadFile"
          >
            <el-button>导入</el-button>
          </el-upload>
           </el-col>
        <!-- </div> -->
        <!-- </div> -->
        <!-- </el-form-item> -->
        <!-- <el-button @click="uploadFile()">导入</el-button> -->

        <!-- 右侧查询图标 -->
        <el-col :span="6">
          <div class="handleIconBox">
            <!-- 查询弹框 -->
            <el-popover
              placement="left-start"
              trigger="click"
              popper-class="icon_porper"
            >
              <div class="search_porper">
                <el-form
                  :model="searchForm"
                  ref="searchForm"
                  label-width="100px"
                  label-position="right"
                  size="mini"
                >
                  <el-form-item label="表码：" prop="tableCode">
                    <el-input
                      v-model="searchForm.tableCode"
                      style="width: 150px"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="表名：" prop="tableName">
                    <el-input
                      v-model="searchForm.tableName"
                      style="width: 150px"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="所属模块" prop="modules">
                    <el-select
                      v-model="searchForm.module"
                      style="width: 80%"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in moduleOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div style="text-align: center; padding: 10px">
                  <el-button size="mini" @click="searchFunc">查询</el-button>
                  <el-button
                    size="mini"
                    @click="
                      (searchForm.tableCode = ''),
                        (searchForm.tableName = ''),
                        (searchForm.module = '')
                    "
                    >重置</el-button
                  >
                </div>
              </div>
              <i class="iconfont icon-sousuo" title="搜索" slot="reference"></i>
            </el-popover>
            <!-- 字段展示弹框 -->
            <el-popover
              placement="bottom"
              width="150"
              trigger="click"
              popper-class="icon_porper"
            >
              <div class="operation_checkbox">
                <el-checkbox-group v-model="checkList">
                  <el-checkbox
                    v-for="item in textData"
                    :label="item.label"
                    :key="item.prop"
                    >{{ item.label }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
              <i
                class="iconfont icon-liebiaoshezhi"
                title="列表设置"
                slot="reference"
              ></i>
            </el-popover>
          </div>
        </el-col>
      </el-row>

      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        @row-click="rowClick"
      >
        <el-table-column width="55" type="selection" />

        <el-table-column
          prop="tableCode"
          label="表编码"
          show-overflow-tooltip
          v-if="columnState[0]"
        />
        <el-table-column prop="tableName" label="表名" show-overflow-tooltip 
        v-if="columnState[1]"/>
        <el-table-column
          prop="tableDesc"
          label="表描述"
          show-overflow-tooltip
          v-if="columnState[2]"
        />
        <el-table-column
          prop="moduleCode"
          label="所属模块"
          show-overflow-tooltip
          v-if="columnState[3]"
        />
        <el-table-column
          prop="initFlag"
          label="是否初始化"
          show-overflow-tooltip
          v-if="columnState[4]"
        />
      </el-table>
      <pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchForm.page"
        :page-size="searchForm.size"
        @refresh="searchFunc"
        :total="total"
      ></pagination>
    </el-row>
    <!-- 导出保单-->
    <el-dialog
      v-dialogDrag
      :title="titleName"
      :visible.sync="exp"
      width="514px"
    >
      <el-form
        :model="exportForm"
        ref="exportRef"
        label-width="110px"
        label-position="left"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="所属模块" prop="modules">
              <el-select
                v-model="exportForm.module"
                style="width: 80%"
                placeholder="请选择"
                multiple
              >
                <el-option
                  v-for="item in moduleOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="expTable()">确 定</el-button>
        <el-button @click="cancelTne">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { pricingTask } from "@/api/index";
import { getDict } from "@/api/getDict";
import onlyOneSearch from "@/components/onlyOneSearch";
import moment from "moment";
export default {
  data() {
    return {
      titleName: "导出",
      exp: false,
      moduleOptions: [],
      checkList: [],
      exportForm: {},

      //     //页面数据量
      //     total:'',
      //列表数据
      tableData: [],
      textData: [
        { prop: "tableCode", label: "表编码", disabled: true },
        { prop: "tableName", label: "表名", disabled: true },
        { prop: "tableDesc", label: "表描述", disabled: true },
        { prop: "moduleCode", label: "所属模块", disabled: true },
        { prop: "initFlag", label: "是否初始化", disabled: true },
      ],
      total: null,
      searchForm: {
        page: 1,
        size: 15,
      },
      fileList: [],
      fileData: {},
    };
  },
  watch: {},
  components: {
    onlyOneSearch
  },
  created() {
    this.checkListInit();
    this.getDict("sys_moduleCode");
    this.searchFunc();
  },
  computed: {
    columnState() {
      let arr = [],
        arr1 = this.textData,
        arr2 = this.checkList;
      for (let i = 0; i < arr1.length; i++) {
        let flag = false;
        for (let j = 0; j < arr2.length; j++) {
          if (arr1[i].label == arr2[j]) {
            flag = true;
            break;
          }
        }
        arr.push(flag);
      }
      return arr;
    },
  },
  mounted() {},
  methods: {
    cancelTne() {
      this.exp = false;
    },
    exportParam() {
      this.exp = true;
    },
    httpRequest(item) {
      this.fileData = item;
      console.log(item, "=============");
    },
    beforeRemove(file) {
      let str = "";
      if (file.name) {
        str = file.name.substring(file.name.length - 4);
      } else {
        str = "";
      }
      const isMDS = str === ".sql";
      if (!isMDS) {
        return;
      } else {
        return this.$confirm(`确定移除${file.name}?`);
      }
    },
    beforeAvatarUpload(file) {
     let name = file.name;
      let type = name.substring(name.lastIndexOf("."), name.length);
      if (type === ".sql") {
        return true;
      } else {
        this.$message.warning("只能选择sql格式的文件上传");
        return false;
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择1个文件，本次选择了${files.length}个文件，共选择了${
          files.length + fileList.length
        }个文件`
      );
    },
    //导出
    expTable() {
      let data = {
        type: "1",
        moduleCodes: this.exportForm.module,
      };
      console.log("data==========" + JSON.stringify(data));
      pricingTask.expreTable(data).then((response) => {
        if (response.data) {
          console.log(response, "response205");
          // var filename = decodeURI(
          //   response.headers["content-disposition"]
          // ).split("=")[1];
          var filename = data.moduleCodes+".sql";
          var blob = new Blob([response.data], {
            type: "application/octet-stream",
          });
          console.log("filename==============="+filename);
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, filename);
          } else {
            var downloadElement = document.createElement("a");
            var href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = filename; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
          }
        } else {
          this.$message.error(response.data.message || "获取失败");
        }
        this.exp=false;
        this.exportForm={
        };
      });
    },
    uploadFile(item) {
      // if (JSON.stringify(this.fileData) === "{}") {
      //   this.$message.warning("请先选择文件！");
      // } else {
        console.log("进入了上传的方法接口=======================");
        const form = new FormData();
        // const blob = new Blob()
        const file = item.file;
        console.log(file);
        form.append("fileData", file);
        pricingTask.tableImp(form).then((response) => {
          if (response.code == 200) {
            this.$message({
              type: "success",
              message: "上传成功！",
            });
          } else {
            this.$message({
              type: "error",
              message: "上传失败！",
            });
          }
          this.$refs.fileData.clearFiles();
        }).catch((err) => {
          this.$refs.fileData.clearFiles();
        });;
      // }
    },
    getDict(data) {
      getDict(data).then((res) => {
        if (res.code == 200) {
          console.log("res========" + JSON.stringify(res));
          this.moduleOptions = res.datas;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    rowClick(row) {
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection();
      }
      this.$refs.multipleTable.toggleRowSelection(row, true);
    },
    searchFunc() {
      let data = {
        page: this.searchForm.page,
        size: this.searchForm.size,
        tableCode: this.searchForm.tableCode,
        tableName: this.searchForm.tableName,
        moduleCode: this.searchForm.module,
      };
      pricingTask.tableFindAll(data).then((res) => {
        if (res.code == 200) {
          this.tableData = res.rows;
          this.total = res.total;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    handleSizeChange(val) {
      this.searchForm.size = val;
      this.searchFunc();
      console.log(val, "每页数");
    },
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.searchFunc();
      console.log(val, "当前页");
    },
        checkListInit() {
      this.checkList = this.textData.map(v => {
        return v.label;
      });
    },
  },
};
</script>
